<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>

<script type="text/javascript" src="../../../js/video_app.js"/>
<script type="text/javascript" src="../../../js/funciones.js"/>
<script type="text/javascript">

    var id = '<?php echo $nodo->getUuid() ?>';
    
    $(document).ready(function(){
   
        // Seteamos el limite
        $('#medio_video_pie').keyup(function(){
                limitChars('medio_video_pie', 140, 'charlimitinfo');
        });
        
        // Hacemos la consulta del video
        mostrarYoutube('video');
        ytVideoApp.listVideos($('#queryType').val(), $('#busqueda_youtube').val(), 1);
   
        // Esta primera parte crea un loader no es necesaria
        $().ajaxStart(function() {
            $('#loader_save').show();
            $('#contenido_nodo').hide();
        }).ajaxStop(function() {
            $('#loader_save').hide();
            $('#contenido_nodo').fadeIn('slow');
        });
        // Interceptamos el evento submit
        $('#medio_video').submit(function() {
            
            if($('#medio_video_busqueda_youtube').val() != '' || $('#medio_video_codigo').val() != ''){
                // Enviamos el formulario usando AJAX
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    // Mostramos un mensaje con la respuesta de PHP
                    success: function(data) {
                        $('#contenido_nodo').html(data);
                        $('#node-caption-'+id).addClass('fondo_video');
                    }
                })        
                return false;
            }
            else{
                alert('No ha agregado el video');
                return false;
            }
            
        });

    });
</script>

<form id="medio_video" action="<?php echo url_for('medio_video/' . ($form->getObject()->isNew() ? 'create' : 'update') . (!$form->getObject()->isNew() ? '?id=' . $form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
    <div id="video_upload">
        <ul class="tabs">
            <li id="buscar_youtube_tab" style="background-color:#eee;">
                <a href="#" onclick="mostrarYoutube('video')">Buscar en Youtube</a>
            </li>
<!--            <li id="buscar_vimeo_tab" style="background-color:#dbdbdb;">
                <a href="#" onclick="mostrarVimeo('video')">Buscar en Vimeo</a>
            </li>-->
<!--            <li id="subir_tab" style="background-color:#dbdbdb; color:#555;">
                <a href="#" onclick="mostrarArchivo('video')">Subir</a>
            </li>-->
            <li id="integrar_tab" style="background-color:#dbdbdb; color:#555;">
                <a href="#" onclick="mostrarCodigo('video')">Integrar video</a>
            </li>
        </ul>
        <div class="medio_container">
            <div id="medio_youtube" class="opciones">
                <div id="searchBox">
                    <div>
                        Cambiar criterio de búsqueda: <input name="searchTerm" type="text" onkeypress="return buscarYoutube(event)" value="<?php echo $nodo->getNombre() ?>" id="busqueda_youtube" />
                        <select id="queryType" name="queryType" onchange="ytVideoApp.queryTypeChanged(this.value, this.form.searchTerm);" >
                            <option value="search_all" selected="selected">Todos los videos</option>
                            <option value="search_top_rated">Destacados</option>
                            <option value="search_most_viewed">Los más vistos</option>
                            <option value="search_recently_featured">Recientemente agregados</option>
                            <option value="search_username">Videos de un usuario específico</option>
                        </select>
                        <input type="button" id="searchYoutube" onclick="ytVideoApp.listVideos($('#queryType').val(), $('#busqueda_youtube').val(), 1);" value="Buscar" />
                    </div>    
                </div>

                <div id="searchResults">
                    <div id="searchResultsListColumn">
                        <div id="searchResultsVideoList"></div>
                        <div id="searchResultsNavigation">
                            <input type="button" id="previousPageButton" onclick="ytVideoApp.listVideos(ytVideoApp.previousQueryType, ytVideoApp.previousSearchTerm, ytVideoApp.previousPage);" value="Atrás" style="display: none;" />
                            <input type="button" id="nextPageButton" onclick="ytVideoApp.listVideos(ytVideoApp.previousQueryType, ytVideoApp.previousSearchTerm, ytVideoApp.nextPage);" value="Siguiente" style="display: none;" />
                        </div>
                    </div>
                    <div id="searchResultsVideoColumn">
                        <div id="videoPlayer"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
<!--            <div id="medio_vimeo" style="display: none;" class="opciones">

            </div>-->
            <div id="medio_archivo" style="display: none;" class="opciones">
                <legend>Inserte su archivo</legend>
                <?php echo $form['fuente']->renderLabel() ?>: <?php echo $form['fuente'] ?>
            </div>
            <div id="medio_codigo" style="display: none;" class="opciones">
                <legend>Agrega la etiqueta "object" tal y como la proporciona cualquier sitio de vídeo/flash</legend>
                <?php echo $form['codigo']->renderLabel() ?>:  <?php echo $form['codigo']; ?>
            </div>
        </div>
    </div>
    <div id="guardar">
        <?php if (!$form->getObject()->isNew()): ?>
            <input type="hidden" name="sf_method" value="put" />
        <?php endif; ?>
        <table id="archivo" style="display: none">
            <tbody>
                <?php foreach ($form as $field):
                    if ($field->getName() == 'codigo' || $field->getName() == 'fuente' || $field->getName() == 'pie') { ?>

                    <?php
                    } else {
                        echo $field;
                    }
                endforeach;
                ?>
            </tbody>
        </table>
        <div id="pie_medio">
            <span class="pie">Descripción:</span><span class="optional">(opcional)</span><br/>
            <?php echo $form['pie']; ?><br/>
            <span id="charlimitinfo" style="float:right;" >Escribe tu texto de 140 caracteres.</span>
        </div>
        <div id="boton_volver"><button type="button" class="cancelar" onclick="cargarNodo('<?php echo $nodo->getUuid() ?>', true)" >Cancelar</button></div>
        <div id="boton_guardar"><input type="submit" class="boton_guardar" alt="Crear medio"  value="Crear medio" /></div>
    </div>
</form>  